<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>苹果风格毛玻璃效果</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        user-select: none;
      }

      body {
        min-height: 100vh;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
        background-size: 400% 400%;
        animation: gradient-shift 15s ease infinite;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        padding: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      @keyframes gradient-shift {
        0%, 100% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
      }

      .glass-container {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border-radius: 24px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        padding: 50px;
        box-shadow: 
          0 8px 32px 0 rgba(31, 38, 135, 0.37),
          inset 0 1px 0 rgba(255, 255, 255, 0.3);
        max-width: 600px;
        width: 100%;
        color: white;
      }

      .glass-container h1 {
        font-size: 48px;
        font-weight: 600;
        margin-bottom: 20px;
        letter-spacing: -0.5px;
      }

      .glass-container p {
        font-size: 18px;
        line-height: 1.6;
        opacity: 0.9;
      }

      .glass-button {
        margin-top: 30px;
        padding: 14px 32px;
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 12px;
        color: white;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
      }

      .glass-button:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      }
    </style>
  </head>
  <body>
    <div class="glass-container">
      <h1>毛玻璃效果</h1>
      <p>
        这是苹果风格的毛玻璃效果，使用 backdrop-filter 实现。
        背景模糊和饱和度增强，创造出优雅的视觉层次。
      </p>
      <button class="glass-button">了解更多</button>
    </div>
  </body>
</html>

